<template>
    <div class="common-layout">
        <el-container>
            <!-- 头部部分 --> 
            <el-header>
                <el-row justify="space-between" align="middle">
                    <el-col :span="6">
                        <div class="breadcrumb">
                            <el-icon><Fold /></el-icon>
                            <span>运营</span>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="user-info">
                            <el-avatar :size="30" src="" />
                            <span class="username">admin</span>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
            <el-header class="white"></el-header>

            <!-- 内容部分 -->
            <el-main>
                <!-- 添加/刷新按钮 -->
                <el-header class="export-refresh">
                    <!-- 点击添加按钮：打开弹窗，重置表单为添加模式 -->
                    <el-button type="danger" @click="handleAdd">
                        <el-icon><Plus /></el-icon>
                        添加
                    </el-button>
                    <el-button type="info" @click="handleRefresh">
                        <el-icon><Refresh /></el-icon>
                        刷新
                    </el-button>
                </el-header>

                <!-- 活动表格 -->
                <el-table :data="tableData" border style="width: 100%" class="dataTable" ref="tableRef">
                    <el-table-column prop="eventName" label="活动名称" width="30%" />
                    <el-table-column prop="time" label="报名时间" width="25%" />
                    <el-table-column prop="price" label="价格/元" width="20%"/>
                    <el-table-column prop="visible" label="是否显示" width="10%" />
                    <el-table-column label="操作" width="15%" >
                        <template #default="scope">
                            <!-- 点击编辑按钮：打开弹窗，回显当前行数据 -->
                            <el-button 
                                class="edit"
                                size="small" 
                                type="primary" 
                                @click="handleEdit(scope.row)"
                            >
                                编辑
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 添加/编辑弹窗 -->
                <el-dialog 
                    v-model="dialogVisible" 
                    :title="dialogTitle"  
                    width="600px"
                    :close-on-click-modal="false"  
                >
                    <!-- 弹窗表单：与form变量双向绑定 -->
                    <el-form :model="form" label-width="120px" class="dialog-form">
                        <!-- 1. 活动名称 -->
                        <el-form-item label="活动名称" prop="eventName" required>
                            <el-input 
                                v-model="form.eventName" 
                                placeholder="请输入活动名称" 
                                maxlength="100"
                            />
                        </el-form-item>

                        <!-- 2. 活动价格 -->
                        <el-form-item label="活动价格(元)" prop="price" required>
                            <el-input-number 
                                v-model="form.price" 
                                :min="0" 
                                :step="0.01" 
                                placeholder="请输入活动价格"
                                precision="2"  
                            />
                        </el-form-item>

                        <!-- 3. 活动内容 -->
                        <el-form-item label="活动内容" prop="content" required>
                            <el-input
                                v-model="form.content"
                                type="textarea"
                                rows="6"
                                placeholder="请输入活动详情内容"
                            />
                        </el-form-item>

                        <!-- 4. 报名时间（日期范围） -->
                        <el-form-item label="报名时间" prop="time" required>
                            <el-date-picker
                                v-model="form.time"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD"
                            />
                        </el-form-item>

                        <!-- 5. 是否显示 -->
                        <el-form-item label="是否显示">
                            <el-radio-group v-model="form.visible">
                                <el-radio value="1" size="large">是</el-radio>
                                <el-radio value="2" size="large">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>

                    <!-- 弹窗底部按钮：取消/确定 -->
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="dialogVisible = false">取消</el-button>
                            <el-button type="primary" @click="handleSubmit">确定</el-button>
                        </span>
                    </template>
                </el-dialog>
                <!--分页器-->
                 <div class="demo-pagination-block">
                    <el-pagination
                    v-model:current-page="currentPage4"
                    v-model:page-size="pageSize4"
                    :page-sizes="[100, 200, 300, 400]"
                    :size="size"
                    :disabled="disabled"
                    :background="background"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    />
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
// 1. 引入Element Plus组件和图标
import { ElTable, ElTableColumn, ElButton, ElIcon, ElHeader, ElRow, ElCol, ElAvatar, ElDialog, ElForm, ElFormItem, ElInput, ElInputNumber, ElDatePicker, ElSwitch } from 'element-plus'
import { Fold, Plus, Refresh } from '@element-plus/icons-vue'
import { ref } from 'vue'

// 2. 表格相关：表格数据 + 表格实例
const tableRef = ref(null)
const tableData = ref([
    {
        eventName: '【私董会第五期】成都成都，天府之国',
        time: '2025-04-15至2025-10-06',
        price: '8888.88',
        visible: '是',
        content: '中汇集团第五期私董会成都之行...'
    },
    {
        eventName: '【私董会第四期】穿越千年，品读大唐故事',  
        time: '2025-04-15至2025-10-06',
        price: '8888.88',
        visible: '是',
        content: '中汇集团第四期私董会大唐之行...'
    },
    {
        eventName: '【私董会第三期】走进孔子故里，研学中华文化',
        time: '2025-04-15至2025-10-06',
        price: '8888.88',
        visible: '是',
        content: '中汇集团第三期私董会孔子故里之行...'
    },
    {
        eventName: '【私董会第二期】国庆济南游玩之旅',
        time: '2025-04-15至2025-10-06',
        price: '8888.88',
        visible: '否',
        content: '中汇集团第二期私董会济南之行...'
    },
    {
        eventName: '【私董会第一期】国庆',
        time: '2025-04-15至2025-10-06',
        price: '8888.88',
        visible: '是',
        content: '中汇集团第一期私董会国庆之行...'
    },
])

// 3. 弹窗相关：控制弹窗显示 + 表单数据 + 弹窗标题
const dialogVisible = ref(false)  // 弹窗显示状态：false隐藏，true显示
const dialogTitle = ref('')      // 弹窗标题：动态切换“添加活动”/“编辑活动”
// 表单数据（与弹窗控件绑定，初始值为空）
const form = ref({
    eventName: '',  // 活动名称
    price: 0.00,    // 活动价格（默认0.10可调整，文档2示例为0.10）
    time: [],       // 报名时间（日期范围，数组格式：[开始日期, 结束日期]）
    content: '',    // 活动内容（正文）
    visible: '是'   // 是否显示（默认“是”）
})

// 4. 刷新页面函数（原有逻辑保留）
const handleRefresh = () => {
    window.location.reload()
}

// 5. 点击“添加”按钮：打开弹窗，重置表单为添加模式
const handleAdd = () => {
    dialogTitle.value = '添加活动'  // 弹窗标题设为“添加活动”
    // 重置表单（清空数据，恢复默认值）
    form.value = {
        eventName: '',
        price: 0.10,  // 文档2示例价格为0.10，此处匹配
        time: [],
        content: '',
        visible: '是'
    }
    dialogVisible.value = true  // 显示弹窗
}

// 6. 点击“编辑”按钮：打开弹窗，回显当前行数据
const handleEdit = (row) => {
    dialogTitle.value = '编辑活动'  // 弹窗标题设为“编辑活动”
    // 将表格选中行的“报名时间”拆分为数组（原数据是“开始至结束”字符串）
    const timeRange = row.time.split('至')  
    // 回显数据到表单
    form.value = {
        eventName: row.eventName,
        price: parseFloat(row.price),  // 价格转为数字（原数据是字符串）
        time: timeRange,               // 日期范围数组
        content: row.content,          // 活动内容（从表格数据中获取）
        visible: row.visible           // 是否显示（与表格数据一致）
    }
    dialogVisible.value = true  // 显示弹窗
}

// 7. 点击弹窗“确定”按钮：提交表单（此处仅做示例，实际需对接接口）
const handleSubmit = () => {
    // 1. 表单验证（实际项目需添加，例如验证活动名称、时间是否填写）
    // 2. 提交逻辑：添加/编辑区分（可通过弹窗标题或额外变量判断）
    if (dialogTitle.value === '添加活动') {
        // 新增逻辑：将表单数据添加到表格（实际需调用接口保存）
        const newEvent = {
            eventName: form.value.eventName,
            price: form.value.price.toFixed(2),  // 转为字符串，保留2位小数
            time: form.value.time.join('至'),    // 日期数组转为“开始至结束”字符串
            content: form.value.content,
            visible: form.value.visible
        }
        tableData.value.unshift(newEvent)  // 添加到表格头部
    } else {
        // 编辑逻辑：更新表格中对应行的数据（实际需调用接口更新）
        const index = tableData.value.findIndex(item => item.eventName === form.value.eventName)
        if (index !== -1) {
            tableData.value[index] = {
                ...tableData.value[index],
                eventName: form.value.eventName,
                price: form.value.price.toFixed(2),
                time: form.value.time.join('至'),
                content: form.value.content,
                visible: form.value.visible
            }
        }
    }
    // 3. 关闭弹窗
    dialogVisible.value = false
    // 4. 提示成功（实际项目可添加ElMessage提示）
    // ElMessage.success(`${dialogTitle.value}成功！`)
}
</script>

<style lang="less" scoped>

/* 头部部分 */
.el-header{
    height: 40px;
    border-bottom: 1px solid rgb(187, 186, 186);
}
.breadcrumb{
    display: flex;
    align-items: center;
}
.user-info{
    display: flex;
    align-items: center;
    gap: 8px;  /* 新增：用户名与头像间距 */
}
.white{
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 内容部分 */
.el-main{
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 添加/刷新部分 */
.export-refresh{
    width: 100%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: right;
    gap: 15px;
    margin-top: 20px;
}

/* 表格部分 */
::v-deep .el-table--fit{
    width: 97% !important;
}
::v-deep .el-table .el-table__header {
  width: 100% !important;
}
::v-deep .el-table .el-table__body {
  width: 100% !important;
}
::v-deep .el-table .el-table__row {
  height: 40px;
}

/* 弹窗表单样式 */
.dialog-form{
    margin-top: 15px;
}
::v-deep .el-form-item {
    margin-bottom: 20px;  /* 表单项间距 */
}
::v-deep .el-dialog__footer {
    text-align: right;  /* 底部按钮右对齐 */
}

/*分页器*/
.demo-pagination-block{
    width: 97%;
    display: flex;
    align-items: center;
    justify-content: right;
    margin-top: 20px;
}
</style>